<template>
    <div class="cart-box" ref="cartBox">
        <div>
            <!-- 购物车的物品展示 -->
            <CartGood class="cart-content" :cartLists="cartPage.cartList"></CartGood>
            <!-- 菜单悬浮展示 -->

            <!-- 购物车的底部栏 -->
            <!-- <CartBottomBar></CartBottomBar> -->
        </div>
    </div>
</template>
<script>
import CartGood from "../components/cartGoods";
// import CartBottomBar from "../components/cartBottomBar";

import BScroll from "better-scroll";

import {mapState} from "vuex";
export default {
    components: {
        CartGood
        // CartBottomBar
    },
    computed:{
        ...mapState(["cartPage"])
    },
    methods:{
        initScroll(){
            var scroll=new BScroll(this.$refs.cartBox,{
                click:true
            });
        },
        initCartList(){
            let obj=JSON.parse(sessionStorage.getItem("carts"));
            if(obj){//若里面有值，就获取里面的值渲染页面
                this.$store.commit("setCartPageCartList",obj);//也可以用辅助方法mapMutations来做，但我就不用
            }
        }
    },
    mounted(){
        this.initScroll();
        this.initCartList();
    }
};
</script>
<style lang="less" scoped>
//购物列表样式
.cart-box {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 0rem;
    right: 0rem;
    // overflow-y: auto;
}
</style>